<template>
	<view>
		<view>
			<table-title content="提交巡查及历史查看"></table-title>

			<small-title content="巡查结果"></small-title>
			<view style="margin-left: 80rpx;margin-right: 50rpx;">
				<uni-forms :modelValue="orderInfo">
					<uni-forms-item label="楼盘" name="build">
						<uni-easyinput :disabled="true" name="build" style="background-color: #ffffff;" type="text" v-model="orderInfo.build" />
					</uni-forms-item>
					<uni-forms-item label="楼层" name="floor">
						<uni-easyinput :disabled="true" name="floor" style="background-color: #ffffff;" type="text" v-model="orderInfo.floor" />
					</uni-forms-item>
					<uni-forms-item label="单元" name="unit">
						<uni-easyinput :disabled="true" name="unit" style="background-color: #ffffff;" type="text" v-model="orderInfo.unit" />
					</uni-forms-item>
					<uni-forms-item label="巡查日期" name="date">
						<uni-easyinput :disabled="true" name="date" style="background-color: #ffffff;" type="text" v-model="orderInfo.date" />
					</uni-forms-item>
					<uni-forms-item required label="巡查结果" name="state">
						<picker @change="bindPickerChange" :value="index" :range="stateList">
							<uni-easyinput-special name="orderInfo.state" style="background-color: #ffffff;" type="text" v-model="orderInfo.state" :disabled="true" />
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="备注" name="desc">
						<uni-easyinput :disabled="false" name="desc" style="background-color: #ffffff;" type="textarea" v-model="orderInfo.desc" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<small-title content="巡查内容"></small-title>
			<view style="margin-left: 80rpx;margin-right: 30rpx;">
				1、单元内设施设备是否完好（门禁、玻璃、天花、百叶窗 ）  <br/>
				2、单元内无闲杂人员、无杂物，卫生（玻璃门、地毯、天花、开关按钮、消防器材）是否干净。 <br/>
				3、单元内照明、空调是否关闭、百叶窗是否正常开启。 <br/>
				4、幕墙玻璃、门禁系统是否故障。   <br/>
				5、单元内无其它异常情况。<br/>
			</view>

			<small-title content="巡查历史"></small-title>
			<proccess-bar v-if="processFlag" ref="proccessBar" :proccessList="proccessListDefult"></proccess-bar>
			<view class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="addOrder">提交巡查</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
		</view>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2,
		syncGetOrder
	} from "../../../util/network.js"
	import {
		processHistoryList,
		getNowFormatDate
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				orderInfo:{
					'build':'',
					'floor':'',
					'unit':'',
					'date':'',
					'state':'',
					'desc':'',
				},
				buildId:0,
				processFlag:false,
				recordId: -1,
				status:-1,
				goodList:[],
				stateList:['正常','异常'],
				index:0,
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				token:'',
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.status = this.index
				this.orderInfo.state = this.stateList[this.index]
			},

			addOrder(){
				if(this.status == -1){
					uni.showModal({
						content:'巡查结果不能为空',
						showCancel:false
					})
					return -1
				}
				if(this.status == 1){
					if(this.orderInfo.desc.trim() == ''){
						uni.showModal({
							content:'巡查异常时，备注不能为空',
							showCancel:false
						})
						return -1
					}
				}
				this.orderInfo.desc = (this.orderInfo.desc == null | this.orderInfo.desc.trim() == '') ? '无' : this.orderInfo.desc.trim()
				console.log(this.orderInfo.desc)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/vacant-house-check/add`,
					header: {
						'Authorization': this.token,
					},
					data: {
						buildId:this.buildId,
						houseId:this.recordId,
						floor:this.orderInfo.floor,
						unit:this.orderInfo.unit,
						status:this.status,
						remark:this.orderInfo.desc,
					},
					method:'POST',
					success: function (res) {
						console.log("提交巡查成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("提交巡查调用失败")
					}
				})
			},
			getOrder(){
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/vacant-house-check/list`,
					header: {
						'Authorization': this.token,
					},
					method:'GET',
					data:{
						pageNo:0,
						pageSize:120,
						houseId:this.recordId,
					},
					success: function (res) {
						console.log(res)
						if(res.data.code == 200){
							let proccessList = []
							for (var i = 0; i < res.data.data.vacantHouseCheckList.length; i++) {
								let state = ""
								if(res.data.data.vacantHouseCheckList[i].status == 0){
									state = "正常"
								}else{
									state = "异常"
								}
								let temp = {}
								temp.comment ="巡查人：" + res.data.data.vacantHouseCheckList[i].patrolUserName + "；巡查结果:" + state + "；备注：" + res.data.data.vacantHouseCheckList[i].remark
								temp.updateTime = res.data.data.vacantHouseCheckList[i].updateTime
								proccessList.push(temp)
								if(i == 0){
									_this.index = res.data.data.vacantHouseCheckList[i].status
									_this.status = res.data.data.vacantHouseCheckList[i].status
									_this.orderInfo.state = state
									_this.orderInfo.desc = res.data.data.vacantHouseCheckList[i].remark
								}
							}
							_this.proccessListDefult=processHistoryList(proccessList.reverse())
							_this.processFlag = true

						}
					},
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			this.token = uni.getStorageSync('token')
			this.recordId = parseInt(option.id)
			this.orderInfo.build = option.buildName
			this.orderInfo.floor = option.houseFloor
			this.orderInfo.unit = option.houseNumber
			let  newdate=getNowFormatDate()
			this.orderInfo.date = newdate
			this.buildId = parseInt(option.buildId)
			console.log("this.orderInfo",this.orderInfo)
		},
		mounted() {
			this.getOrder()
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50rpx;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
</style>
